<template>
    <div>
        <van-nav-bar title="购物车页面" left-text="返回" left-arrow @click-left="() => { $router.push('/') }" />
        <van-card num="2" price="2.00" desc="描述信息" title="商品标题"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />
        <div v-for="item in cartData">
            <van-swipe-cell>
                <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                    <template #thumb>
                        <div style="display: flex;">
                            <img style="width: 70px;height: 70px;"
                                :src="item.goods.goods_small_logo ? item.goods.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
                                alt="">
                            <van-checkbox v-model="item.checked"></van-checkbox>
                        </div>

                    </template>

                    <template #num>
                        <div style="display: flex;">
                            <van-stepper v-model="value" theme="round" button-size="22" disable-input />
                        </div>


                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button"
                        style="width: 100%;margin-left: 2px;" />
                </template>

            </van-swipe-cell>
        </div>
        <van-submit-bar :price="19999.00" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked">全选</van-checkbox>
            <template #tip>
                你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
            </template>
        </van-submit-bar>

    </div>
</template>

<script setup>
import router from '@/router';
import { useCounterStore } from '@/stores/piniaCart'
import { computed, ref } from 'vue';
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
let cartData = ref([])
console.log(store.piniaCart);

const cart = () => {
    cartData.value = store.piniaCart
}
cart()
let allprice = computed(() => {
    let allprice = ref(0)
    let cartOk = cartData.value.filter(item => item.checked)
    cartOk.forEach(item => {
        allprice.value += item.number * item.goods.goods_price
    })
    return allprice.value * 100
})
let onSubmit = () => {
    router.push('/order')
}
</script>

<style lang="scss" scoped></style>